require('./PageSbazEdit.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import {Control} from 'react-keeper'
import EngSelect from './../engselect'
import moment from 'moment';
import {
  Button,
  Page,
  Panel,
  PanelHeader,
  PanelBody,
  PanelFooter,
  ButtonArea,
  MediaBox,
  Cells,
  Checkbox,
  Select,
  Cell,
  CellHeader,
  MediaBoxTitle,
  MediaBoxHeader,
  MediaBoxDescription,
  MediaBoxBody,
  MediaBoxInfo,
  Popup,
  PopupHeader,
  MediaBoxInfoMeta,
  Input,
  CellsTips,
  Icon,
  Label,
  CellsTitle,
  Toptips,
  Toast,
  Dialog,
  FooterLink,
  Article,
  Grids,
  PullToRefresh,
  CellBody,
  CellFooter,
  Form,
  FormCell,
  Radio,
  Gallery,
  GalleryDelete,
  Uploader,
  TextArea,
  SearchBar,
  PreviewItem
} from 'react-weui/build/packages'
import AMap from './../../../components/amap'
import inputtp from './../../../assets/icon/输入.png';

class SbazEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showToast: false,
      showLoading: false,
      toastTimer: null,
      loadingTimer: null,

      showAndroid2: false,
      showAndroid3: false,
    }
    this.showLoading = this.showLoading.bind(this);
    this.hideDialog2 = this.hideDialog2.bind(this);
    this.hideDialog3 = this.hideDialog3.bind(this);


    this.goselecteng = this.goselecteng.bind(this);
    this.onEngFetch = this.onEngFetch.bind(this);
    this.setSelectEng = this.setSelectEng.bind(this);

    this.sgjdChange = this.sgjdChange.bind(this);
    this.tqqkChange = this.tqqkChange.bind(this);
    this.tqwdChange = this.tqwdChange.bind(this);
    this.jlrqChange = this.jlrqChange.bind(this);
    this.leftSelect = this.leftSelect.bind(this);
    this.rightSelect = this.rightSelect.bind(this);
    this.qkjlChange = this.qkjlChange.bind(this);
    this.qkjlBlur = this.qkjlBlur.bind(this);
    this.qkwtChange = this.qkwtChange.bind(this);
    this.qkwtBlur = this.qkwtBlur.bind(this);
    this.qklsChange = this.qklsChange.bind(this);
    this.qklsBlur = this.qklsBlur.bind(this);
    this.qkqtChange = this.qkqtChange.bind(this);
    this.qkqtBlur = this.qkqtBlur.bind(this);
    this.yjysRqChange = this.yjysRqChange.bind(this);
    this.yjysBlur = this.yjysBlur.bind(this);

    this.sqRqChange = this.sqRqChange.bind(this);
    this.sqBlur = this.sqBlur.bind(this);

    this.checkChange = this.checkChange.bind(this);

    this.saveInfo = this.saveInfo.bind(this);
    this.upInfo = this.upInfo.bind(this);
    this.goHome = this.goHome.bind(this);
    this.goList = this.goList.bind(this);
  }

  goList() {
    Control.go('/myyewu/rizhijllist', this.state.rzstore.currentEng);
  }

  goHome() {
    Control.go('/myyewu/rizhilist');
  }

  hideDialog2() {
    this.setState({showAndroid2: false});
  }

  hideDialog3() {
    this.setState({showAndroid3: false});
  }

  jlrqChange(e) {
    console.log('jlrqChange');
    Actions.jlrqChange(e.target.value);
  }

  yjysRqChange(e) {
    console.log('jlrqChange');
    Actions.yjysRqChange(e.target.value);
  }

  yjysBlur(e) {
    console.log('jlrqChange');
    Actions.yjysBlur(e.target.value);
  }

  sqBlur(e) {
    Actions.sqBlur(e.target.value);
  }

  sqRqChange(e) {
    console.log('jlrqChange');
    Actions.sqRqChange(e.target.value);
  }

  checkChange(e) {
    Actions.checkInfo(e);
  }


  saveInfo() {
    //this.showLoading();
    this.setState({showAndroid2: false, showAndroid3: false});
    Actions.saveInfo();
  }

  upInfo() {
    this.setState({showAndroid2: false, showAndroid3: false});
    Actions.upInfo();
  }

  showLoading() {
    this.setState({showLoading: true});

    this.state.loadingTimer = setTimeout(() => {
      this.setState({showLoading: false});
    }, 2000);
  }


  sgjdChange(e) {
    Actions.sgjdChange(e.target.value);
  }

  tqqkChange(e) {
    Actions.tqqkChange(e.target.value);
  }

  tqwdChange(e) {
    Actions.tqwdChange(e.target.value);
  }

  leftSelect(e) {
    this.setState({bottom_show: false})
  }

  rightSelect(e) {
    this.setState({bottom_show: false})
    Actions.checkChange();

  }

  qkjlChange(e) {
    Actions.qkjlChange(e.target.value);
  }

  qkjlBlur(e) {
    Actions.qkjlChange(e.target.value);
  }

  qkwtChange(e) {
    Actions.qkwtChange(e.target.value);
  }

  qkwtBlur(e) {
    Actions.qkwtChange(e.target.value);
  }

  qklsChange(e) {
    Actions.qklsChange(e.target.value);
  }

  qklsBlur(e) {
    Actions.qklsChange(e.target.value);
  }

  qkqtChange(e) {
    Actions.qkqtChange(e.target.value);
  }

  qkqtBlur(e) {
    Actions.qkqtChange(e.target.value);
  }

  goselecteng() {
    Control.go('/myyewu/engselect');
  }

  setSelectEng(obj) {
    console.log('返回');
    console.info(obj);
    Actions.setCurrentEng(obj);
  }

  onEngFetch(obj, callback) {
    console.info('engfetch');
  }

  render() {
    let t = this;
    console.log('设备安装');

    return (
      <div className="page sbaqedit">
        <div>1</div>
        <div style={{
          height: window.screen.height - 170,
          background: '#fff'
        }}>
          <PullToRefresh>
            <page>

              <Panel className="head-panel">
                <PanelHeader>
                  <div className="title-bg"/>
                  设备安装
                </PanelHeader>
                <PanelBody>
                  <MediaBox type="appmsg">

                    <MediaBoxBody>
                      <MediaBoxTitle>
                        {this.state.rzstore.currentEng.engName}
                      </MediaBoxTitle>
                      <MediaBoxDescription>
                        <p style={{paddingTop: '5px'}}>{this.state.rzstore.currentEng.engJsdw}</p>
                        <p style={{paddingTop: '5px'}}>{new Date(this.state.rzstore.jlmode.jlrq).toLocaleString()}</p>

                      </MediaBoxDescription>
                    </MediaBoxBody>
                    <CellFooter style={{position: 'relative', marginRight: '10px'}}>
                      <img src={inputtp} alt="" style={{display: `block`, width: `20px`, marginRight: `5px`}}/>
                    </CellFooter>
                  </MediaBox>
                </PanelBody>
                <PanelFooter>
                  <Cell access link onClick={e => {
                    if (!this.state.rzstore.isUpload) {
                      this.refs.engselect.getCurrentEng()
                    }
                  }}>
                    <CellBody/>
                    <CellFooter><h5>选择工程</h5></CellFooter>
                  </Cell>
                </PanelFooter>


              </Panel>


              <Panel>
                <PanelHeader>
                  验收项目
                </PanelHeader>
                <PanelBody>
                  <MediaBox type="small_appmsg">
                    <Cell>
                      <CellHeader>
                        <img src={inputtp}
                             style={{
                               width: '20px',
                               marginRight: '5px',
                               display: 'block'
                             }}/>
                      </CellHeader>
                      <CellBody>
                        {/*<TextArea placeholder="请输入" onChange={this.sgjdChange} showCounter={false}
                              value={this.state.rzstore.jlmode.ysxmmc}   rows="2"
                              readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>*/}

                        <Select defaultValue={this.state.rzstore.jlmode.ysxmmc} value={this.state.rzstore.jlmode.ysxmmc}
                                onChange={this.sgjdChange} readOnly={this.state.rzstore.isUpload}>
                          <option value="图纸会审">图纸会审</option>
                          <option value="桩基验收">桩基验收</option>
                          <option value="验槽">验槽</option>
                          <option value="地基与基础分部验收">地基与基础分部验收</option>
                          <option value="主体分部验收">主体分部验收</option>
                          <option value="竣工验收">竣工验收</option>
                          <option value="地基检查">地基检查</option>
                        </Select>
                      </CellBody>
                    </Cell>
                  </MediaBox>
                </PanelBody>


                <PanelHeader>
                  申请时间
                </PanelHeader>
                <PanelBody>
                  <MediaBox type="small_appmsg">
                    <Cell>
                      <CellHeader>
                        <img src={inputtp}
                             style={{
                               width: '20px',
                               marginRight: '5px',
                               display: 'block'
                             }}/>
                      </CellHeader>
                      <CellBody>
                        {/*<p style={{paddingTop:'5px'}}>{ new Date(this.state.rzstore.jlmode.sqsj).toLocaleString() }</p>*/}
                        <Input type="date" defaultValue={this.state.rzstore.jlmode.sqsj}
                               Value={this.state.rzstore.jlmode.sqsj} onBlur={this.sqBlur}
                               onChange={this.sqRqChange}/>

                      </CellBody>
                    </Cell>
                  </MediaBox>
                </PanelBody>

                <PanelHeader>
                  预计验收时间
                </PanelHeader>
                <PanelBody>
                  <MediaBox type="small_appmsg">
                    <Cell>
                      <CellHeader>
                        <img src={inputtp}
                             style={{
                               width: '20px',
                               marginRight: '5px',
                               display: 'block'
                             }}/>
                      </CellHeader>
                      <CellBody>

                        <Input type="date" defaultValue={this.state.rzstore.jlmode.yjyssj}
                               Value={this.state.rzstore.jlmode.yjyssj} onBlur={this.yjysBlur}
                               onChange={this.yjysRqChange}/>

                      </CellBody>
                    </Cell>
                  </MediaBox>
                </PanelBody>

                <PanelHeader>
                  监督人员
                </PanelHeader>
                <PanelBody>
                  <MediaBox type="small_appmsg">
                    <Cell>
                      <CellHeader>
                        <img src={inputtp}
                             style={{
                               width: '20px',
                               marginRight: '5px',
                               display: 'block'
                             }}/>
                      </CellHeader>
                      <CellBody>

                        <p>{this.state.rzstore.jlmode.zjy}</p>

                        <Popup
                          show={this.state.bottom_show}
                          onRequestClose={e => this.setState({bottom_show: false})}
                        >
                          <PopupHeader
                            left="取消"
                            right="确定"
                            leftOnClick={this.leftSelect}
                            rightOnClick={this.rightSelect}
                          />
                          <Form checkbox>
                            {
                              this.state.rzstore.jdy.length > 0 ?
                                this.state.rzstore.jdy.map((item, i) => {
                                  return (
                                    <FormCell checkbox>
                                      <CellHeader>
                                        <Checkbox name={item.name} value={item.emplId} onChange={this.checkChange}/>
                                      </CellHeader>
                                      <CellBody>{item.name}</CellBody>
                                    </FormCell>
                                  )
                                })
                                : <MediaBox>未找到数据！</MediaBox>
                            }
                          </Form>
                        </Popup>
                      </CellBody>
                      <CellFooter access link onClick={e => this.setState({bottom_show: true})}>
                        选择
                      </CellFooter>
                    </Cell>
                  </MediaBox>
                </PanelBody>


                <PanelHeader>
                  备注
                </PanelHeader>
                <PanelBody>
                  <MediaBox type="small_appmsg">
                    <Cell>
                      <CellHeader>
                        <img src={inputtp}
                             style={{
                               width: '20px',
                               marginRight: '5px',
                               display: 'block'
                             }}/>
                      </CellHeader>
                      <CellBody>
                        <TextArea placeholder="请输入" onChange={this.qkqtChange} showCounter={false}
                                  value={this.state.rzstore.jlmode.bz} rows="3"
                                  onBlur={this.qkqtBlur}
                                  readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                      </CellBody>
                    </Cell>
                  </MediaBox>
                </PanelBody>
                <AMap ref="amap" onSetPosition={this.setPosition} position={this.state.rzstore.position}></AMap>
                <EngSelect ref="engselect" onSelectEng={this.setSelectEng}
                           currentEng={this.state.rzstore.currentEng}></EngSelect>
                <Toast icon="loading" show={this.state.showLoading}>保存中...</Toast>
                <Toptips type="warn" show={this.state.rzstore.showWarn} className="warn-div">
                  <Icon value="warn"/>{this.state.rzstore.warnMessage}
                </Toptips>
              </Panel>
            </page>
          </PullToRefresh>
        </div>
        <div style={{padding: '-10px'}}>
          <ButtonArea direction="horizontal">
            <Button type="warn"
                    onClick={e => this.setState({showAndroid3: true})}
                    disabled={this.state.rzstore.isUpload}
                    className={this.state.rzstore.isNew ? 'edithide' : 'editshow'}> 提交</Button>
            <Button type="primary" onClick={e => this.setState({showAndroid2: true})}
                    disabled={this.state.rzstore.isUpload}
                    className={this.state.rzstore.isNew ? 'editshow' : 'editshow'}>保存</Button>
          </ButtonArea>

          <Dialog type="android" title={'操作'} show={this.state.showAndroid2}
                  buttons={[
                    {
                      type: 'default',
                      label: '取消',
                      onClick: this.hideDialog2
                    },
                    {
                      type: 'primary',
                      label: '确定',
                      onClick: this.saveInfo
                    }
                  ]}
          >
            是否保存?
          </Dialog>
          <Dialog type="android" title={'操作'} show={this.state.showAndroid3}
                  buttons={[
                    {
                      type: 'default',
                      label: '取消',
                      onClick: this.hideDialog3
                    },
                    {
                      type: 'primary',
                      label: '确定',
                      onClick: this.upInfo
                    }
                  ]}
          >
            是否提交?(提交成功后无法更改数据)
          </Dialog>
        </div>


      </div>
    );
  }


  notice() {
  }


  componentWillMount() {
    let t = this;
    if (Control.state) {
      console.log('有值');
      Actions.loadMode(Control.state);
    }
    else {
      console.log('无值');
      Actions.initMode();
    }

  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.jlmode || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] || !is(thisProps[key], nextProps[key])) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
        return true;
      }
    }
    return false;
  }
}

SbazEdit.propTypes = {
  pmode: React.PropTypes.object.isRequired,
  peng: React.PropTypes.object.isRequired,
  imgls: React.PropTypes.object.isRequired,
  router: React.PropTypes.object.isRequired,
  location: React.PropTypes.object.isRequired,
  urlShow: React.PropTypes.object.isRequired,
}

ReactMixin.onClass(SbazEdit, Reflux.connect(Store, 'rzstore'));


export default SbazEdit;
